<template>
	<view class="sleep">
		<view class="sleep-header">
			<view class="time">
				<image src="/static/index/left.png" @click="back"></image>
				{{time}}
			</view>
			<view class="bar"  >
				<view :style="{backgroundColor:dayBgColor}" @click="toDay">
					<text>日</text>
				</view>
				<view :style="{backgroundColor:weekBgColor}" @click="toWeek">
					<text>周</text>
				</view>
			</view>
		</view>
		<view class="sleep-content">
			<SleepDayVue v-if="ispage===1"></SleepDayVue>
			<SleepWeekVue v-if="ispage===2"></SleepWeekVue>
		</view>
		
	</view>
</template>

<script setup>
	import {onMounted, ref} from 'vue';
	import SleepDayVue from './components/SleepDay.vue';
	import SleepWeekVue from './components/SleepWeek.vue';
	const ispage=ref(1);
	const dayBgColor=ref('#699CEF');
	const weekBgColor=ref(' ');
	//获取当前时间
	let date=new Date;
	let year=date.getFullYear();
	let month=date.getMonth()+1;
	let currentDay=date.getDate();
	let time=ref(year+"年"+month+"月"+currentDay+"日");
	//跳转sleepDay页面方法
	function toDay(){
	    // 添加背景色
		dayBgColor.value='#699CEF';
		weekBgColor.value=' ';
		//显示页面
		ispage.value=1;
		//修改顶部时间
		let time=ref(year+"年"+month+"月"+currentDay+"日");
		
	}
	//跳转sleepweek页面方法
	function toWeek(){
	    //添加背景色
		dayBgColor.value=' ';
		weekBgColor.value='#699CEF';
		//显示页面
		ispage.value=2;
		// 修改顶部时间
		let weekDate=getWeekDays()
		time.value=year+"年"+weekDate[0]+"至"+weekDate[6];
	}
	//返回上一级页面
	function back(){
		uni.navigateBack({
			delta:1
		});
	}
	//获取一周为那几天
	function getWeekDays() {
	    const firstDayOffset = currentDay === 0? 6 : currentDay - 1;
	    const firstDayOfWeek = new Date(date);
	    firstDayOfWeek.setDate(date.getDate() - firstDayOffset);
	
	    const weekDays = [];
	    for (let i = 0; i < 7; i++) {
	        const day = new Date(firstDayOfWeek);
	        day.setDate(firstDayOfWeek.getDate() + i);
	        const year = day.getFullYear();
	        const month = String(day.getMonth() + 1);
	        const date = String(day.getDate());
	        weekDays.push(`${month}月${date}日`);
	    }
	    return weekDays;
	}
</script>

<style scoped>
	.sleep-header{
		padding: 60rpx 10rpx;
		width:100%;
		height:100rpx;
		background-color:#aac8ff;
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		z-index: 1000;
	}
	.time{
		width: 100%;
		text-align: center;
		font-size:24rpx;
		font-weight: bold;
		margin-top: 20rpx;
	}
	.time image {
		position: fixed;
		top: 50rpx;
		left: 30rpx;
		width: 60rpx;
		height: 60rpx;
	}
	.bar{
		width:80%;
		height:70rpx;
		margin-top: 20rpx;
		display:flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-evenly;
	    text-align: center;
		border-radius:15rpx;
		background-color:#aac8ff;
	}
	.bar view{
		line-height:70rpx;
		width:50%;
		height:70rpx;
		border-radius: 15rpx;
	}
</style>